/**
 * Created by mapbar_front on 2019/8/8.
 */
import React,{Component} from 'react';

function Child1(){
    return(
        <div>
            组件Child1
        </div>
    )
}
function Child2(){
    return(
        <div>
            组件Child2
        </div>
    )
}

const components = {
    child1: Child1,
    child2: Child2
}

// class DeepJSX extends Component{
//     render(){
//         return(
//             <div>
//                 DeepJSX
//             </div>
//         )
//     }
// }

function Deep(props){
    console.log('props',props);
    return <div>Deep</div>
}

function Button(props){
    const {kind,...other } = props;
    return <div>
                <input type="text"/>
                <button onClick={props.theme}>
                    {kind}
                </button>
            </div>
}
function handleClick(){
    console.log('点击');
}


function Div(){
    return(
        <div>
            <h1>div</h1>
            <div/>
            <div>{false}</div>
            <div>{true}</div>
            <div>{null}</div>
            <div>{String(undefined)}</div>
        </div>
    )
}

function Repeat(props){
    let items = [];
    for(let i=0;i<props.num;i++){
        items.push(props.children(i));
    }
    console.log('items',items);
    return <div>{items}</div>
}
function DeepJSX(props){
    const SpecificStory = components[props.storyType];
    //return <components[props.storyType] />
    return  <div>
                <Deep {...props}/>
                <SpecificStory/>
                <Button kind="和爱" theme={()=>handleClick()}/>
                <Repeat num={10}>
                    {
                        (index)=>{
                            console.log('index',index);
                            return <div>
                                This is item {index} in the list
                            </div>
                        }
                    }
                </Repeat>
                <Div/>
            </div>
}

export default DeepJSX;
